<template>
  <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>{{ article.title }}</span>
      </div>
    </template>
    <div class="content" style="font-size: 2opx;">
      {{ article.content }}
    </div>
  </el-card>
  <div class="buttom">
    <comments :parentarticleId=router.params.id></comments>、
    <div class="rata">
      <p style="font-size: larger;">当前文章评分 {{ article.rata }}</p>
      <p style="font-size: larger;">请对当前文章评分</p>
      <el-rate v-model="nowRata" :texts="['一星', '二星', '三星', '四星', '五星']" show-text @change="selectRata(nowRata)" />
    </div>

  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getArticleByID } from '@/api/music/music.ts'
import { useRoute } from 'vue-router'
import comments from '@/components/music-content/comments.vue'
import { getRata } from '@/api/music/music.ts'
import {
  ElMessage
} from "element-plus";

const nowRata = ref(1)

const router = useRoute();

const article = ref({})
const selectRata = async (rata) => {
  const res = await getRata(rata, router.params.id)
  article.rata = res.rata
  ElMessage({ message: "评分" + rata + "成功", type: "success" });
}
onMounted(() => {
  getArticleByID(router.params.id).then(res => {
    article.value = res.data
  })

})
</script>
<style scoped lang="scss">
.rata {
  margin-left: 500px;
  margin-top: 100px;
}

.buttom {
  display: flex;
}

.el-card {
  margin-top: 15px;
  padding: 20px;
  min-width: 1800px;
}

.card-header {
  display: flex;
  justify-content: center;

  span {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
</style>